import React, {Component,lazy,Suspense} from 'react'
import {Route, NavLink,Redirect} from 'react-router-dom'
import Loading from "./Loading";

// 1.懒加载路由在使用对应路由时加载对应组件
const Home=lazy(()=>import('./Home'))
const About=lazy(()=>import('./About'))
export default class Index extends Component {
    render() {
        return (
            <div>
                <h2>lazy组件懒加载</h2>
                <NavLink to='/home'>home</NavLink>
                <NavLink to='/About'>about</NavLink>
                {/* 2.用户交互缓冲配合组件*/}
                <Suspense fallback={<Loading/>}>
                    <Route path="/home" component={Home}></Route>
                    <Route path="/About" component={About}></Route>
                    <Redirect to='/home'></Redirect>
                </Suspense>
            </div>
        )
    }
}
